﻿@using RuoVea.ExConfig;
@{
    Layout = "_Layout";
    ViewData["Title"] = "书签管理";
    string token = AppSettings.app("ITab:token");
    string signatureKey = AppSettings.app("ITab:signatureKey");
    string useragent = AppSettings.app("ITab:useragent");

}
@section Styles {
    <style>.avue-crud__grid__value.imgbox {position: absolute;right: 20px;top: 40px;}.avue-crud__grid__value.imgbox img { width: 100%;}.imgbox .avue-crud__grid__label { display: none; }.icon.row { border: 0px !important;}</style>
}
<el-container>
    <el-aside width="200px">
        <avue-tree ref="tree" :option="categoryOption" :data="categoryData" @@node-click="nodeClick">
            <template slot="icon" slot-scope="scope">
                <i :class="scope.row.icon" style="font-size:24px"></i>
            </template>
        </avue-tree>
    </el-aside>
    <el-main>
        <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:row-save="handleRowSave"
                   v-on:row-update="handleRowUpdate"
                   v-on:row-del="handleRowDel"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange"
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">

            <template slot="icon" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.icon">{{scope.row.account}} </el-avatar>
            </template>
            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
            <template slot="menuLeft" slot-scope="{size}">
                <el-tooltip placement="bottom" effect="light">
                    <div slot="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在用户登录情况:<br />1、书签分类存在相同的名称不会重复创建。<br />2、存在相同的标题和地址将不会重复导入数据。<br />3、综上，导入数据为0条时,提示导入失败!</div>
                    <el-button type="success" :size="size" v-on:click="handleExportIn" icon="el-icon-folder">书签导入</el-button>
                </el-tooltip>
                <el-dropdown trigger="click">
                    <el-button type="warning" :size="size">
                        ITab<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-setting">
                            <el-tooltip placement="right" effect="dark">
                                <div slot="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配置ITab信息:<br />1、打开ITab界面。<br />2、F12,选择网络->筛选 XHR-> 消息头中寻找出参数:token、signaturekey</div>
                                <span v-on:click="handleItabSet">配置ITab</span>
                            </el-tooltip>
                        </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-download">
                            <el-tooltip placement="right" effect="dark">
                                <div slot="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从ITab同步到本地:<br />2、打开ITab界面。<br />2、F12,选择网络->筛选 XHR-> 消息头中寻找出参数:token、signaturekey</div>
                                <span v-on:click="handleItabExportIn">从ITab同步</span>
                            </el-tooltip>
                        </el-dropdown-item>
                        <el-dropdown-item icon="el-icon-upload2">
                            <el-tooltip placement="right" effect="dark">
                                <div slot="content">1、请先备份Itab数据并点按钮[从ITab同步],否则Itab数据将丢失。<br />3、Itab没有的分类将会自动新增。<br />3、推送后若没有及时显示,则点我的->同步本地。</div>
                                <span v-on:click="handleItabPrint">推送到ITab</span>
                            </el-tooltip>
                        </el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
                @* <el-link href="/home" target="self" :underline="false" icon="el-icon-house" type="primary">去首页</el-link> *@
            </template>
            <template slot-scope="{type,size,row,index}" slot="menuBefore">
                <el-link :href="row.url" target="_blank" type="text" icon="el-icon-share" class="el-button el-button--text el-button--mini avue-crud__addBtn">链接</el-link>
            </template>
        </avue-crud>
    </el-main>
</el-container>

<el-dialog title="导入书签" :visible.sync="addListDialogVisible" width="400px" :before-close="handleAddListBeforeClose">
    <el-upload ref="upload" drag :auto-upload="false" action="" accept=".html" :on-change="handleFileChange">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传html文件，且不超过500kb</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button v-on:click="handleAddListClose" size="mini">取 消</el-button>
        <el-button type="primary" v-on:click="handleAddList" size="mini" :loading="exportInLodaing">确 定</el-button>
    </span>
</el-dialog>



@section Scripts {
    <script src="~/js/bookmarks-to-json.js" asp-append-version="true"></script>
    <script>
        var elementIcons = ["el-icon-platform-eleme", "el-icon-eleme", "el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-more", "el-icon-more-outline", "el-icon-star-on", "el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help", "el-icon-help", "el-icon-minus", "el-icon-plus", "el-icon-check", "el-icon-close", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-upload2", "el-icon-download", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera", "el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion", "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-share", "el-icon-d-caret", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-bottom-left", "el-icon-bottom-right", "el-icon-back", "el-icon-right", "el-icon-bottom", "el-icon-top", "el-icon-top-left", "el-icon-top-right", "el-icon-arrow-left", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-up", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-video-pause", "el-icon-video-play", "el-icon-refresh", "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-finished", "el-icon-sort", "el-icon-sort-up", "el-icon-sort-down", "el-icon-rank", "el-icon-loading", "el-icon-view", "el-icon-c-scale-to-original", "el-icon-date", "el-icon-edit", "el-icon-edit-outline", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets", "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip", "el-icon-takeaway-box", "el-icon-search", "el-icon-monitor", "el-icon-attract", "el-icon-mobile", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick", "el-icon-reading", "el-icon-data-line", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-receiving", "el-icon-collection", "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-sold-out", "el-icon-sell", "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag", "el-icon-news", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bangzhu", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-lock", "el-icon-unlock", "el-icon-key", "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunrise", "el-icon-sunrise-1", "el-icon-sunset", "el-icon-sunny", "el-icon-cloudy", "el-icon-partly-cloudy", "el-icon-cloudy-and-sunny", "el-icon-moon", "el-icon-moon-night", "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken", "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware", "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water", "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet", "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator", "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple", "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea", "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato-strips", "el-icon-lollipop", "el-icon-ice-cream-square", "el-icon-ice-cream-round"];
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "bookmark",
                    pageUrl: "/bookmark/pages",
                    addUrl: "/bookmark/add",
                    editUrl: "/bookmark/update",
                    deleteUrl: "/bookmark/delete",

                    categoryData: [],
                    categoryOption: {
                        defaultExpandAll: true,
                        menu: false,
                        addBtn: false,
                        props: {
                            labelText: `${this.i18n.t('title')}`,
                            label: 'name',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    option: {
                        gridBtn: true,
                        grid: true,
                        gridSpan: 6,
                        searchShowBtn: Permissions.avePermission(`bookmark:searchBtn`),
                        refreshBtn: Permissions.avePermission(`bookmark:searchBtn`),
                        menuWidth: '250',
                        rowKey: 'id', rowParentKey: 'categoryId',
                        searchShow: false,
                        page: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },

                            { prop: "icon", label: ``, slot: true, display: false, width: '70', editDisplay: false, addDisplay: false, className: "imgbox", gridRow: true },

                            {
                                label: `类别`, prop: "categoryId", hide: true, showColumn: false, defaultExpandAll: true,
                                type: "tree", props: { label: 'name', value: 'id', children: 'children' }, dicUrl: `/category/list`, dicFlag: true,
                                showAllLevels: false, emitPath: false, checkStrictly: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            { prop: "title", label: `名称`, search: false, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], gridRow: true },
                            { prop: "url", label: `地址`, search: false, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], gridRow: true },

                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', gridRow: true },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number", step: 100, value: 100, clearable: true, width: '80', gridRow: true },
                            // {
                            //     prop: "categoryId", label: `类别`, hide: true, showColumn: false, defaultExpandAll: true,
                            //     type: "tree", props: { label: 'name', value: 'id', children: 'children' }, dicUrl: `${Vue.prototype.$baseURL}/category/list`,
                            //     showAllLevels: false, emitPath: false, checkStrictly: true,
                            //     rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], gridRow: true
                            // },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: 140, gridRow: true },
                        ],
                    },

                    dialogtitle: `${this.i18n.t('user_role')}`,
                    subDialogVisible: false,
                    selectRow: {},
                    roleData: [],
                    roleValue: [],

                    addListDialogVisible: false,
                    jsonBookmarks: [],
                    exportInLodaing: false,

                    addItabListDialogVisible: false,
                    exportInItabLodaing: false,
                    ItabData:{ token:"",signaturekey:"",useragent:"" },
                    ItabDataOption:{
                         span:24,
                         labelWidth:'110',
                         column: [
                            { label: 'token', prop: 'token', type: 'input', span: 24, rules: [{ required: true, message: "不能为空.", trigger: "blur" }] },
                            { label:'signaturekey',prop:'signaturekey', type:'input',span:24,rules: [{ required: true,message: "不能为空.",trigger: "blur" }]},
                            { label: 'useragent', prop: 'useragent', type: 'input',span:24 },
                         ]
                    },
                }
            },
            created() {
                this.categoryLoad();
                this.loadItabInfo();
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 7) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                categoryLoad() {
                    this.$http.get(`/category/list`).then((res) => {
                        this.categoryData = res;
                        this.loading = false;
                    }).catch(e => {
                        console.log(e);
                    });
                },
                nodeClick(data) {
                    var searchData = { ...this.searchParams, ...{ categoryId: data.id } };
                    this.searchParams = searchData;
                    this.onLoad();
                },
                handleLoadCategoryData() {
                    let curry = { pageNo: 1, pageSize: 10 };
                    var data = { ...curry };
                    this.$http.get("/category/list", data).then((res) => {
                        this.menuData = res;
                        this.activeIndex = res[0].code;
                        this.localSelect(res[0].id);
                    }).catch(e => {
                        console.log(e);
                    });
                },
                localSelect(id) {
                    this.activeId = id;
                    this.onLoad();
                },
                handleAddListClose(e) {
                    this.addListDialogVisible = false;
                },
                handleAddListBeforeClose(e) {
                    this.addListDialogVisible = false;
                },

                handleExportIn() {
                    this.clearFileList();
                    this.addListDialogVisible = true;
                },

                handleItabExportIn() {
                 this.$DialogForm.show({
                   title: '从ITab同步',
                   width: '450px',
                   data: this.ItabData,
                   option: this.ItabDataOption,
                   callback:(res)=>{
                   console.log(res.data);
                   this.$http.post("/bookmark/byitab",res.data).then((resData) => {
                       this.handleLoadCategoryData();
                       res.done()
                       setTimeout(() => {
                           if(resData.code=200)
                           this.$message.success('操作完成.')
                           res.close()
                       }, 1000)
                   });
                   }
                 })
                },
                loadItabInfo(){
                    this.$http.get("/bookmark/ItabInfo").then((resData) =>{
                        resData.token  = resData.token || "@token";
                        resData.signaturekey  = resData.signaturekey || "@signatureKey";
                        resData.useragent  = resData.useragent ||"@useragent";
                        this.ItabData=resData;
                    });
                },
                handleItabSet(){
                   this.$DialogForm.show({
                        title: '配置ITab信息',
                        width: '450px',
                        data: this.ItabData,
                        option: this.ItabDataOption,
                        callback:(res)=>{
                            console.log(res.data);
                            this.$http.post("/bookmark/saveItabInfo",res.data).then((rdata) => {
                                this.loadItabInfo();
                                res.done()
                                setTimeout(() => {
                                    this.$message.success('操作完成.')
                                    res.close()
                                }, 1000)
                            });
                        }
                    })
                  
                },
                handleFileChange(file, fileList) {
                    const { status, raw } = file;
                    if (status !== 'ready' || !raw) {
                        return;
                    }
                    // 检查文件扩展名是否为 .html
                    if (/\.(htm|html)$/i.test(raw.name)) {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            const content = e.target.result;
                            try {
                                // 使用bookmarksToJSON函数
                                const options = {
                                    stringify: true,
                                    formatJSON: true,
                                    spaces: 2
                                };

                                const jsonBookmarks = bookmarksToJSON(content, options);

                                this.jsonBookmarks = jsonBookmarks;
                            } catch (error) {
                                console.error('转换 HTML 文件时发生错误:', error);
                            }
                        };
                        reader.onerror = (err) => {
                            console.error('文件读取错误', err);
                        };
                        reader.readAsText(raw);
                    } else {
                        this.Alert.error('请选择 HTML 文件！');
                        this.clearFileList();
                    }
                },
                clearFileList() {
                    // 获取 el-upload 组件的实例
                    const uploadComponent = this.$refs.upload;
                    if (uploadComponent && typeof uploadComponent.clearFiles === 'function') {
                        uploadComponent.clearFiles();
                    }
                },
                handleAddList() {
                    this.exportInLodaing = true;
                    this.$http.post("/bookmark/adds", this.jsonBookmarks, {
                        headers: { 'Content-Type': 'application/json' }
                    }).then((res) => {
                        if (res == true) {
                            this.$message({ message: "操作成功", center: true, type: 'success' });
                            this.categoryLoad();
                            this.jsonBookmarks = [];
                            this.addListDialogVisible = false;
                            this.clearFileList();
                        }
                        this.exportInLodaing = false;
                    });
                },
                handleItabPrint() {
                    this.$DialogForm.show({
                       title: '推送到ITab',
                       width: '450px',
                       data: this.ItabData,
                       option: this.ItabDataOption,
                       callback:(res)=>{
                           console.log(res.data);
                           this.$http.post("/bookmark/pushitab",res.data).then((resData) => {
                               this.handleLoadCategoryData();
                               res.done()
                               setTimeout(() => {
                                   if(resData.code=200)
                                   this.$message.success('操作完成.')
                                   res.close()
                               }, 1000)
                           });
                       }
                     })
                }
            },
            filters: {
                iconFilter(index) {
                    return elementIcons[index];
                }
            }
        });
    </script>
}
